I want to add a javascript Mouseover drop down menu to DBman, or basically replace the Standard footer menu (Home, Search, Log off, etc).

Is there a specific type of script i should use? I.e. one that requires tables, has javascript in the head tag and body tag or just the body tag.

What i'm trying to do is to add some shortcut search options in the mouseover menu.



I have tried to add something to the HTML.pl file but i get "DBMan encountered an internal error. Please enable debugging to view."

Heres the javascipt i want to add :

<!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->
<a href="http://">Home</a>
<a href="http://" onMouseover="showit(1)">Search</a>
<a href="http://" onMouseover="showit(2)">Show recent additions</a>
<a href="http://" onMouseover="showit(3)">List all</a>
<a href="http://" onMouseover="showit(4)">Papers</a>
<a href="http://" onMouseover="showit(5)">Log off</a><br>

<!-- Edit the dimensions of the below, plus background color-->
<ilayer width=400 height=32 name="dep1" bgColor="#E6E6FF">
<layer name="dep2" width=400 height=32>
</layer>
</ilayer>
<div id="describe" style="background-color:#E6E6FF;width:400px;height:32px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div>


<script language="JavaScript1.2">

var submenu=new Array()

//Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors.

submenu[0]=''

submenu[1]=''

submenu[2]='<font size="2" face="Verdana"><b><a href="http://">Music</a> | <a href="http://">Video</a></b></font>'

submenu[3]='<font size="2" face="Verdana"><b><a href="http://">Applets</a> | <a href="">Tutorials</a></b></font>'

submenu[4]='<font size="2" face="Verdana"><b><a href="">Applets</a> | <a href="">Tutorials</a></b></font>'

submenu[5]=''

//Set delay before submenu disappears after mouse moves out of it (in milliseconds)
var delay_hide=500

/////No need to edit beyond here

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which){
clear_delayhide()
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all)
menuobj.innerHTML=thecontent
else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
delayhide=setTimeout("showit(-1)",delay_hide)
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhide=setTimeout("showit(-1)",delay_hide)
}

function clear_delayhide(){
if (window.delayhide)
clearTimeout(delayhide)
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

</script>

Where i have:

submenu[2]='<font size="2" face="Verdana"><b><a href="http://">Music</a>

Would be ok adding a search string as the href, like $db_script_link_url&view_records=1&so=ascend&sb=0&$db_key=* ? Would i need to add ! if ($per_view); after it?



Thanks for your help

Pete

yikes! This is the blind leading the blind again.

Take a look at the html.pl. looks like you have to put all that stuff (footer info) inside a print qq|your stuff|; or a qq!your stuff!; if you use a | within the delimiter. I assume you are going to replace the html_footer section.

As for the script itself turn it into a js file. then you can just add a line in the appropriate section of each html page. Does it go in the head section? See http://www.maxxblade.co.uk/clock/index.htm as an example of how to create a js file.

I'm not sure how the ilayer and div are to be placed relative to the above stuff. Is there a site that gives instructions on how to install this script.

Seems like you should be able to do submenu[2]='<font size="2" face="Verdana"><b><a href="http://$db_script_link_url&view_records=1&so=ascend&sb=0&$db_key=*">Music</a>

Let's get this rolling and see what happens...!


Gene
"The older I get, the more I admire competence, just simple competence in any field from adultery to zoology."

Thanks for the reply esm.

Ok now i have this in my html.pl file:

sub html_footer {
# --------------------------------------------------------
#

my $font = 'Font face="Verdana, Arial, Helvetica" Size=2';

print qq!<P align=center><$font>!;

<!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->
<a href="http://">Home</a>
<a href="http://" onMouseover="showit(1)">Search</a>
<a href="http://" onMouseover="showit(2)">Show recent additions</a>
<a href="http://" onMouseover="showit(3)">List all</a>
<a href="http://" onMouseover="showit(4)">Papers</a>
<a href="http://" onMouseover="showit(5)">Log off</a><br>

<!-- Edit the dimensions of the below, plus background color-->
<ilayer width=400 height=32 name="dep1" bgColor="#E6E6FF">
<layer name="dep2" width=400 height=32>
</layer>
</ilayer>
<div id="describe" style="background-color:#E6E6FF;width:400px;height:32px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div>

<script language="JavaScript1.2" src="menu.js"></script>

# print qq!| <A HREF="$db_script_link_url" onMouseOver=" window.status='Return to the main page'; return true" onMouseOut="window.status=' '; return true">Home</A> !;
# print qq!| <A HREF="$db_script_link_url&add_form=1" onMouseOver=" window.status='Add a report'; return true" onMouseOut="window.status=' '; return true">Add</A> ! if ($per_add);
# print qq!| <A HREF="$db_script_link_url&view_search=1" onMouseOver=" window.status='Search for a report'; return true" onMouseOut="window.status=' '; return true">Search</A> ! if ($per_view);
# print qq!| <A HREF="$db_script_link_url&delete_search=1" onMouseOver=" window.status='Delete a report'; return true" onMouseOut="window.status=' '; return true">Delete</A> ! if ($per_del);
# print qq!| <A HREF="$db_script_link_url&modify_search=1" onMouseOver=" window.status='Modify a report'; return true" onMouseOut="window.status=' '; return true">Modify</A> ! if ($per_mod);
# print qq!| <A HREF="$db_script_link_url&view_records=1&so=ascend&sb=0&$db_key=*" onMouseOver=" window.status='Show all reports'; return true" onMouseOut="window.status=' '; return true">List All</A> ! if ($per_view);
# print qq!| <A HREF="$db_script_link_url&admin_display=1" onMouseOver=" window.status='Admin functions'; return true" onMouseOut="window.status=' '; return true">Admin</A> ! if ($per_admin);
# print qq!| <A HREF="$db_script_link_url&logoff=1" onMouseOver=" window.status='Log off the database'; return true" onMouseOut="window.status=' '; return true">Log Off</A> |!;

print qq!</font></p>!;

# Print the Footer
print qq!

!;
}



And i've made a menu.js file that conatins this:

var submenu=new Array()

//Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors.

submenu[0]=''

submenu[1]=''

submenu[2]='<font size="2" face="Verdana"><b><a href="http://">Music</a> | <a href="http://">Video</a></b></font>'

submenu[3]='<font size="2" face="Verdana"><b><a href="http://">Applets</a> | <a href="">Tutorials</a></b></font>'

submenu[4]='<font size="2" face="Verdana"><b><a href="">Applets</a> | <a href="">Tutorials</a></b></font>'

submenu[5]=''

//Set delay before submenu disappears after mouse moves out of it (in milliseconds)
var delay_hide=500

/////No need to edit beyond here

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which){
clear_delayhide()
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all)
menuobj.innerHTML=thecontent
else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
delayhide=setTimeout("showit(-1)",delay_hide)
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhide=setTimeout("showit(-1)",delay_hide)
}

function clear_delayhide(){
if (window.delayhide)
clearTimeout(delayhide)
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}



Now, i still get an internal error. Is this because i havent put the correct dbman $db_script_link_url etc links in the .js file or is it because i've completely messed up the html.pl file ?

I dont know that much about javascript or cgi so i need all the help i can get.

BTW, the html part of the menu that i've put into the html.pl file is to go into (if it was a normal html file) the body tags.



Thx again :)

one of the things I do when I am changing a subroutine is to just copy it, paste the copy just under the original and then rename the original. something like

sub html_footer_original {

etc, etc, etc

}


sub html_footer {
# --------------------------------------------------------
# Print the menu and the footer and logo. It would be nice if you left
# the logo in. ;)
#
# We only print options that the user have permissions for.
#

my $font = 'Font face="Verdana, Arial, Helvetica" Size=2';
print qq!<script language="JavaScript" src="http://your_path_to/cgi-bin/dbman/menu.js"></script>!;

print qq!<P align=center><$font>!;

print qq!| <a href="$db_script_link_url">Home</a>!;
print qq!| <a href="$db_script_link_url&view_search=1" onMouseover="showit(1)">Search</a>! ;
print qq!| <a href="http://" onMouseover="showit(2)">Show recent additions</a>!;
print qq!| <a href="http://" onMouseover="showit(3)">List all</a>! ;
print qq!| <a href="http://" onMouseover="showit(4)">Papers</a>! ;
print qq!| <a href="http://" onMouseover="showit(5)">Log off</a><br>!;

print qq!<ilayer width=400 height=32 name="dep1" bgColor="#E6E6FF">!;
print qq!<layer name="dep2" width=400 height=32>!;
print qq!</layer>!;
print qq!</ilayer>!;
print qq!<div id="describe" style="background-color:#E6E6FF;width:400px;height:32px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div>!;


print qq!</font></p>!;

# Print the Footer
print qq!

!;
}

Notice what I did with the print statements print qq!

That is the good news. The bad news is that the mouseover still does not work. You will need to follow the instructions for that.

Looks like it should work though...


Gene
"The older I get, the more I admire competence, just simple competence in any field from adultery to zoology."

esm, you sir are a genius.



Thankyou for your help! It works! :)

so you actually got it to work?


Gene
"The older I get, the more I admire competence, just simple competence in any field from adultery to zoology."

Yup :)

well, I could get it to work but not with by using the menu.js file

could you post what you did?


Gene
"The older I get, the more I admire competence, just simple competence in any field from adultery to zoology."

well, manic apparently has been busy so I'll go ahead and post my solution, ugly as it is. The actually javascript code can be seen at http://www.dynamicdrive.com/...ex1/tabmouseover.htm

with there is no word wrap in the code section, I just made some of the long lines into several lines. you can tell which ones they are since they don't begin with the print qq tag. to reconstruct the line, just use the the backspace key until you have one space in between - I always broke the line at a space.

Anyway, Like I said, I could not get the menu.js to work. so I just included the javacode in the htm_footer section. Just one problem. Each print qq~submenu[x]= is supposed to be all on one line. that was not happening so first I tried using <br>. Still did not work. Them I remembered seeing the carriage feed/ line return in the links mailer.pm ( does anybody remember the days of DOS ). So that's why you see all those \015\012. I won't guarantee it will always work but then only 97% of folks have java enabled anyway... The only \015\012 that are absolutely needed are the ones need to put the submenus on a line by themselves.

One last thing. since the javascript already had some ! and some |, I ended up using the ~. Heck, if Alex can use it, I should be able to also! Copying is the sincerest form of flattery.





Ooops! and I forgot to mention that I added <a href="javascript: //" so that if someone clicked on the main menu item, nothing happened. Adjust as necessary.


Gene
"The older I get, the more I admire competence, just simple competence in any field from adultery to zoology."

Hi esm,

I wont bother posting what i had because it didnt work properly anyway (i jumped the gun when i said that it worked ok), but your script in your previous post is great and works a treat. Thanks for posting it.

To tell you the truth it never occured to me to add the javascript into the html.pl like you did, and thanks for the explaination in your post.



Good job.